<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 欢迎</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: white;
        }
        
        .welcome-container {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background-color: #22C55E;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            z-index: 0;
        }
        
        .status-bar {
            color: white;
            background-color: transparent;
            z-index: 10;
        }
        
        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 80px;
            position: relative;
            z-index: 1;
        }
        
        .logo {
            width: 120px;
            height: 120px;
            background-color: white;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            margin-bottom: 24px;
        }
        
        .logo-icon {
            color: #22C55E;
            font-size: 60px;
        }
        
        .app-name {
            color: white;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .app-slogan {
            color: rgba(255,255,255,0.9);
            font-size: 16px;
        }
        
        .forms-container {
            flex: 1;
            background-color: white;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            margin-top: -30px;
            padding: 40px 24px;
            position: relative;
            z-index: 2;
        }
        
        .tab-buttons {
            display: flex;
            margin-bottom: 24px;
        }
        
        .tab-button {
            flex: 1;
            text-align: center;
            padding: 12px;
            font-size: 16px;
            font-weight: 600;
            color: #6B7280;
            border-bottom: 2px solid transparent;
        }
        
        .tab-button.active {
            color: #22C55E;
            border-bottom-color: #22C55E;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            margin-top: 24px;
        }
        
        .social-button {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            background-color: white;
            color: #333;
            font-size: 20px;
        }
        
        .agreement-text {
            margin-top: 24px;
            text-align: center;
            font-size: 12px;
            color: #6B7280;
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="welcome-bg"></div>
        
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- Logo部分 -->
        <div class="logo-container">
            <div class="logo">
                <i class="logo-icon fas fa-heartbeat"></i>
            </div>
            <h1 class="app-name">减肥大师</h1>
            <p class="app-slogan">健康生活，轻松减重</p>
        </div>
        
        <!-- 表单容器 -->
        <div class="forms-container">
            <div class="tab-buttons">
                <div class="tab-button active" id="login-tab">登录</div>
                <div class="tab-button" id="register-tab">注册</div>
            </div>
            
            <!-- 登录表单 -->
            <div id="login-form">
                <div class="form-group">
                    <label class="form-label">手机号码</label>
                    <input type="tel" class="form-input" placeholder="请输入手机号码">
                </div>
                
                <div class="form-group">
                    <label class="form-label">密码</label>
                    <input type="password" class="form-input" placeholder="请输入密码">
                </div>
                
                <div class="flex justify-end mb-4">
                    <a href="#" class="text-sm text-green-500">忘记密码？</a>
                </div>
                
                <button class="btn-primary">登录</button>
                
                <div class="mt-6 text-center text-gray-500 text-sm">
                    或使用第三方账号登录
                </div>
                
                <div class="social-login">
                    <a href="#" class="social-button">
                        <i class="fab fa-weixin" style="color: #07C160;"></i>
                    </a>
                    <a href="#" class="social-button">
                        <i class="fab fa-qq" style="color: #12B7F5;"></i>
                    </a>
                    <a href="#" class="social-button">
                        <i class="fab fa-weibo" style="color: #E6162D;"></i>
                    </a>
                </div>
                
                <div class="agreement-text">
                    登录即表示您同意我们的<a href="#" class="text-green-500">服务条款</a>和<a href="#" class="text-green-500">隐私政策</a>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
            
            // 切换登录/注册标签
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            
            loginTab.addEventListener('click', function() {
                loginTab.classList.add('active');
                registerTab.classList.remove('active');
                // 在实际应用中，这里会切换显示登录表单
            });
            
            registerTab.addEventListener('click', function() {
                registerTab.classList.add('active');
                loginTab.classList.remove('active');
                // 在实际应用中，这里会切换显示注册表单
            });
        });
    </script>
</body>
</html> 